<!-- 角色列表的编辑 -->
<template>
  <el-dialog
    v-model="props.visiable"
    @closed="closedFn"
    v-if="title === 'add' ? true : false"
  >
    <!-- <div class="box" v-show="props.visiable"> -->
    <!-- <div class="box1"> -->
    <h2>分配角色</h2>
    <!-- </div> -->
    <!-- <div class="box2"> -->
    <el-form :model="form" label-width="120px">
      <el-form-item label="角色分配:">
        <el-input v-model="form.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="描述:">
        <el-input v-model="form.desc" type="textarea" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="是否启用:">
        <el-radio-group v-model="form.resource">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item class="button">
        <el-button @click="closedFn">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </el-form-item>
    </el-form>
    <!-- </div> -->
    <!-- </div> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, defineProps, withDefaults, defineEmits } from "vue";
import { IAdminListItem } from "@/request/QmsAdminConreiller";
import { Ref } from "vue";
import { ref } from "vue";
import { resource } from "../../request/api";
const form = ref({
  name: "",
  resource: 0,
  desc: "",
});
let props = withDefaults(
  defineProps<{
    visiable: boolean;
    title: string;
  }>(),
  {
    visiable: true,
    title: "add",
  }
);
let emits = defineEmits(["bianji2", "confirm"]);
let originForm = ref({}) as Ref<IAdminListItem>; // 相当于一个空的备份
let ownForm = ref({}) as Ref<IAdminListItem>;
// 确定
let onConfirm = () => {
  resource.AddRole(form.value);
  // console.log(ownForm.value);
  // 将参数返回给父级 ，让父级发请求完成功能
  emits("confirm", ownForm.value);
};
const closedFn = () => {
  //清空 实际上是点击取消的时候,将ownForm恢复成备份的值
  ownForm.value = { ...originForm.value };
  emits("bianji2", false);
};
</script>

<style scoped lang="scss">
span {
  font-size: 22px;
}
h2 {
  font-size: 20px;
}
.box {
  background-color: rgb(221, 208, 208);
  width: 500px;
  height: 350px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
}
.box1 {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color: #909399;
}
.box2 {
  width: 85%;
  height: 32px;
  line-height: 32px;
}
.button {
  position: relative;
  left: 170px;
}
</style>
